<template>
	<view class="home" :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="flex-r s-b a-c ml-1 mr-1">
			<view class="iconfont logo">&#xe766;</view>
			<!-- <view class="iconfont add-btn">&#xe753;</view> -->
		</view>
		<view class="mt-2">
			<navVue />
		</view>
		<view class="consult-test flex-r s-b mt-2">
			<image src="@/static/images/home/consult-bg.png" mode="" />
			<image src="@/static/images/home/psyTest-bg.png" mode="" />
			<view class="consult">
				<view class="ml-1">困惑倾诉</view>
				<text class="ml-1">硕博导师1V1咨询</text>
			</view>
			<view class="psy-test">
				<view class="ml-3">心理测试</view>
				<text class="ml-3">你在意的都有答案</text>
			</view>
		</view>
		<view class="divination mt-2">
			<image src="../../static/images/home/planet-bg.png" mode=""></image>
			<view class="flex-r planet s-b">
				<view class="left">
					占位图
				</view>
				<view class="right flex-c">
					<view class="flex-r s-b a-c">
					<view class="title flex-r">
						<view class="iconfont">&#xe751;</view>
						当前行星能量
					</view>
					<text class="iconfont">&#xe763;</text>
					</view>
					<view class="flex-c details">
						<view class="">
							<text class="text1">36.3</text><text class="text2">家人卦</text>
						</view>
						<text>今日重点在「转化危机」与「建立边界」，可随身携带36号闸门对应黑曜石增强决断力</text>
					</view>
				</view>
			</view>
		</view>
		<view class="report flex-r mt-2">
			<view :class="{'rep-active':reports==1}" @click="reports = 1">
				今日能量报告
			</view>
			<view :class="{'ml-1':true,'rep-active':reports==2}" @click="reports = 2">
				核心行星闸门解读
			</view>
		</view>
		<view class="report-ai mt-2">
			ai内容
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import navVue from './components/nav.vue';
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	let reports = ref(1)
</script>
<style lang="scss" scoped>
	.home {
		padding: 20rpx;

		.logo {
			font-size: 60rpx;
		}

		.add-btn {
			font-size: 40rpx;
		}

		.consult-test {
			position: relative;

			image {
				width: 360rpx;
				height: 140rpx;
			}
		}

		.consult,
		.psy-test {
			width: 360rpx;
			height: 140rpx;
			border-radius: 20rpx;
			position: absolute;
			top: 0;
		}

		.consult {
			left: 0;
		}

		.psy-test {
			right: 0;
		}

		.consult view,
		.psy-test view {
			font-size: 34rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}

		.consult text,
		.psy-test text {
			font-size: 22rpx;
			color: #EF6400;
		}

		.psy-test>text {
			color: #8953B7;
		}

		.divination {
			height: 300rpx;
			border-radius: 20rpx;
			position: relative;
			image{
				height: 300rpx;
				width: 100%;
			}
			.planet{
				position: absolute;
				left:0;
				top: 0;
				.left{
					width: 236rpx;
					height: 300rpx;
					background-color: #F6EDFF;
					border-radius: 20rpx 60rpx 60rpx 20rpx;
				}
				.right{
					width: 460rpx;
					.title{
						text-indent: 1em;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #B86A4F;
					}
					.details{
						padding-left: 20rpx;
						>view{
							.text1{
								font-weight: 500;
								font-size: 50rpx;
								line-height: 72rpx;
							}
							.text2{
								font-weight: 500;
								font-size: 32rpx;
								line-height: 44rpx;
							}
						}
						>text{
							font-size: 24rpx;
							line-height: 42rpx;
						}
					}
				}
			}
		}

		.report view {
			line-height: 70rpx;
			font-size: 28rpx;
			color: #4D4D4D;
			background-color: #FFFBEA;
			border-radius: 36rpx;
			padding: 0 30rpx;
		}

		.report {
			.rep-active {
				background-color: #FF9281;
				color: #fff;
			}
		}
	}
</style>